//pages/community/post.vue
<template>
  <view class="page">
    <!-- 导航栏 -->
    <view class="nav-bar">
      <text @click="handleCancel" class="nav-btn">取消 ✕</text>
      <text @click="handlePublish" class="nav-btn publish-btn">发布 ✨</text>
    </view>

    <!-- 发帖内容区 -->
    <view class="post-content">
      <!-- 标题输入 -->
      <input 
        class="title-input" 
        v-model="postTitle"
        placeholder="✍️ 请输入标题（必填）" 
        maxlength="50"
      />
      <text class="title-count">{{ postTitle.length }}/50</text>

      <!-- 正文输入 -->
      <textarea 
        class="content-input" 
        v-model="postContent"
        placeholder="📝 分享你的考研经验和想法，帮助更多考研人..." 
        maxlength="2000"
      />

      <!-- 图片上传区 -->
      <view class="image-area">
        <view 
          v-for="(image, index) in images" 
          :key="index"
          class="image-item"
        >
          <image :src="image" mode="aspectFill" />
          <text 
            class="delete-btn"
            @click="deleteImage(index)"
          >×</text>
        </view>
        
        <view 
          class="upload-btn"
          v-if="images.length < 9"
          @click="chooseImage"
        >
          <text class="upload-icon">+</text>
          <text class="upload-text">📷 添加图片</text>
        </view>
      </view>

      <!-- 话题选择 -->
      <view class="topic-section">
        <text class="section-title">📌 选择话题</text>
        <scroll-view 
          class="topic-list" 
          scroll-x
        >
          <view 
            v-for="topic in topics" 
            :key="topic.id"
            class="topic-item"
            :class="{ active: selectedTopic === topic.id }"
            @click="selectTopic(topic.id)"
          >
            {{ topic.name }}
          </view>
        </scroll-view>
      </view>

      <!-- 标签选择 -->
      <view class="tag-section">
        <text class="section-title">🏷️ 添加标签</text>
        <view class="tag-list">
          <view 
            v-for="tag in tags" 
            :key="tag.id"
            class="tag-item"
            :class="{ active: selectedTags.includes(tag.id) }"
            @click="toggleTag(tag.id)"
          >
            {{ tag.name }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 帖子内容
const postTitle = ref('')
const postContent = ref('')
const images = ref([])
const selectedTopic = ref(null)
const selectedTags = ref([])

// 话题列表
const topics = ref([
  { id: 1, name: '📊 数学一' },
  { id: 2, name: '📚 英语一' },
  { id: 3, name: '📖 政治' },
  { id: 4, name: '📝 专业课' },
  { id: 5, name: '💡 考研经验' },
  { id: 6, name: '🎯 择校咨询' }
])

// 标签列表
const tags = ref([
  { id: 1, name: '✍️ 刷题' },
  { id: 2, name: '📚 复习' },
  { id: 3, name: '🎯 考研规划' },
  { id: 4, name: '💡 备考建议' },
  { id: 5, name: '📝 考研日常' },
  { id: 6, name: '🔍 资料分享' }
])

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 9 - images.value.length,
    success: (res) => {
      images.value = [...images.value, ...res.tempFilePaths]
    }
  })
}

// 删除图片
const deleteImage = (index) => {
  images.value.splice(index, 1)
}

// 选择话题
const selectTopic = (topicId) => {
  selectedTopic.value = topicId
}

// 切换标签
const toggleTag = (tagId) => {
  const index = selectedTags.value.indexOf(tagId)
  if (index > -1) {
    selectedTags.value.splice(index, 1)
  } else if (selectedTags.value.length < 3) {
    selectedTags.value.push(tagId)
  } else {
    uni.showToast({
      title: '最多选择3个标签 ⚠️',
      icon: 'none'
    })
  }
}

// 取消发布
const handleCancel = () => {
  uni.showModal({
    title: '提示 ⚠️',
    content: '确定要放弃编辑吗？',
    success: (res) => {
      if (res.confirm) {
        uni.navigateBack()
      }
    }
  })
}

// 发布帖子
const handlePublish = () => {
  if (!postTitle.value.trim()) {
    uni.showToast({
      title: '请输入标题 ⚠️',
      icon: 'none'
    })
    return
  }

  if (!postContent.value.trim()) {
    uni.showToast({
      title: '请输入内容 ⚠️',
      icon: 'none'
    })
    return
  }

  if (!selectedTopic.value) {
    uni.showToast({
      title: '请选择话题 ⚠️',
      icon: 'none'
    })
    return
  }

  uni.showLoading({
    title: '发布中... ⏳'
  })

  // 模拟发布过程
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '发布成功 ✨',
      icon: 'success',
      duration: 1500,
      success: () => {
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      }
    })
  }, 1000)
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 40rpx;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background: #fff;
}

.nav-btn {
  font-size: 30rpx;
  color: #666;
  padding: 10rpx 20rpx;
}

.publish-btn {
  color: #A8BF8F;
  font-weight: bold;
}

.post-content {
  background: #fff;
  padding: 30rpx;
  margin-top: 20rpx;
}

.title-input {
  font-size: 32rpx;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #f5f5f5;
}

.title-count {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  padding: 10rpx 0;
}

.content-input {
  width: 100%;
  height: 300rpx;
  font-size: 28rpx;
  padding: 20rpx 0;
  line-height: 1.6;
}

.image-area {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding: 20rpx 0;
}

.image-item {
  position: relative;
  width: 220rpx;
  height: 220rpx;
}

.image-item image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

.delete-btn {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  width: 40rpx;
  height: 40rpx;
  line-height: 36rpx;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 20rpx;
  font-size: 32rpx;
}

.upload-btn {
  width: 220rpx;
  height: 220rpx;
  background: #f8f8f8;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.upload-icon {
  font-size: 60rpx;
  color: #999;
  margin-bottom: 10rpx;
}

.upload-text {
  font-size: 24rpx;
  color: #999;
}

.topic-section,
.tag-section {
  margin-top: 40rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.topic-list {
  white-space: nowrap;
  padding: 10rpx 0;
}

.topic-item {
  display: inline-block;
  padding: 10rpx 30rpx;
  margin-right: 20rpx;
  background: #f8f8f8;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
}

.topic-item.active {
  background: #A8BF8F;
  color: #fff;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.tag-item {
  padding: 10rpx 30rpx;
  background: #f8f8f8;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
}

.tag-item.active {
  background: rgba(168, 191, 143, 0.1);
  color: #A8BF8F;
  border: 2rpx solid #A8BF8F;
}
</style>